<template>
    <div class="bigbox">
        <!-- 搜索功能组件 -->
        <UserSearch @onSearch="onSearch" ref="searchBar"></UserSearch>
        <!-- 重置按钮 -->
        <el-form-item>
            <el-button type="primary" @click="resetSearch">重置</el-button>
        </el-form-item>
        <!-- 新增商品按钮 -->
    </div>
    <div>
        <el-table :data="tableData" stripe style="width: 100%" highlight-current-row
            :header-cell-style="{ background: '#def2fb', color: '#000' }" max-height="750">
            <el-table-column align="center" prop="username" label="用户名" :show-overflow-tooltip="true" />
            <el-table-column align="center" prop="phone" label="手机号" :show-overflow-tooltip="true" />
            <el-table-column align="center" prop="email" label="邮箱" :show-overflow-tooltip="true" />
            <el-table-column align="center" prop="address" label="地址" :show-overflow-tooltip="true" />
            <el-table-column align="center" prop="sex" label="性别" :show-overflow-tooltip="true">
                <template #default="scope">
                    <div>{{ scope.row.sex == 0 ? '男' : '女' }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="image" label="头像" :show-overflow-tooltip="true">
                <template #default="scope">
                    <el-image class="tableData_image" :src="scope.row.image"></el-image>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="300px">
                <template #default="scope">
                    <div style="display: flex; align-items: center;justify-content: center;">
                        <el-button size="small" type="warning" @click="editArticle(scope.row.id)"
                            v-if="!scope.row.status == 1">编辑</el-button>
                        <el-button size="small" type="danger" @click="deleteArticle(scope.row.id)"
                            v-if="!scope.row.status == 1">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogFormVisible" :title="title">
            <el-form ref="articleForm" :model="form" :rules="rules" @submit.native.prevent="onSubmit">
                <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="on" />
                </el-form-item>
                <el-form-item label="手机号" prop="phone" :label-width="formLabelWidth">
                    <el-input v-model="form.phone" autocomplete="on" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
                    <el-input v-model="form.email" autocomplete="on" />
                </el-form-item>
                <el-form-item label="住址" prop="address" :label-width="formLabelWidth">
                    <el-input v-model="form.address" autocomplete="on" />
                </el-form-item>
                <el-form-item label="头像" prop="image" :label-width="formLabelWidth">
                    <el-upload :headers="headers" class="upload_image" :before-upload="beforeAvatarUpload"
                        :http-request="uploadImage" :show-file-list="false">
                        <el-image class="image" :src="form.image" v-if="form.image" />
                       <div v-else style="border:1px solid #eee;padding:50px 50px 40px"> <el-icon :size="40" color="#a8abb2" >
                            <Plus />
                        </el-icon></div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script>
import UserSearch from "../../components/UserSearch.vue";
import {
    alluserListApi,
    UserinfoDeleteApi,
    userDetailEvery,
    imageUpload,
    UserinfoEditApi,
    UserSearchApi,
    
} from "../../api/index";
import router from "@/router";
export default {
    name: "UserList",
    components: {
        UserSearch,
    },

    data() {
        return {
            headers: {
                Authorization: localStorage.getItem("token"),
            },
            tableData: [],
            dialogFormVisible: false,
            title: "",
            form: {},
            formLabelWidth: 80,
            rules: {
                username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
                phone: [
                    { required: true, message: "手机号不能为空", trigger: "blur" },
                ],
                address: [
                    { required: true, message: "地址不能为空", trigger: "blur" },
                ],
                email: [
                    { required: true, message: "邮箱不能为空", trigger: "blur" },
                ],
                image: [
                    { required: true, message: "头像不能为空", trigger: "blur" },
                ],
            },
            disabled: false,
            showOptions: [
                {
                    label: "显示",
                    value: 1,
                },
                {
                    label: "隐藏",
                    value: 0,
                },
            ],
            CategoryOptions: [
                {
                    label: "文学",
                    value: 1,
                },
                {
                    label: "理学",
                    value: 0,
                },
            ],
            search: {},
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        //参数必须是param，才能获取到内容
        uploadImage(param) {
            // 获取上传的文件名
            var file = param.file;
            //发送请求的参数格式为FormData
            const formData = new FormData();
            formData.append("file", file);
            // 调用param中的钩子函数处理各种情况，这样就可以用在组件中用钩子了。也可以用res.code==200来进行判断处理各种情况
            imageUpload(formData, param)
                .then((res) => {
                    if (res.data.code == 1) {
                        this.form.image = res.data.data.path
                    }
                    // param.onSuccess(res);
                })
                .catch((err) => {
                    param.onError(err);
                });
        },
        beforeAvatarUpload(file) {
            console.log(file.type);
            // if (
            //   file.type != "image/jpeg" ||
            //   file.type != "image/png" ||
            //   file.type != "image/gif"
            // )
            //   return this.$message.error("上传头像图片只能是 JPG、PNG、GIF 格式!");
            if (file.size > 500000)
                return this.$message.error("上传头像图片大小不能超过 5mb!");
        },
        resetForm() {
            this.form = {}
        },
        resetSearch() {
            this.$refs.searchBar.reset();
            this.getList();
        },
        onSearch(search) {
            this.search = search;
            this.getSearch(this.search);
        },
        getSearch(val) {
            UserSearchApi(val).then((res) => {
                console.log(res);
                if (res.data.code == 1) {
                    this.tableData = res.data.data;
                } else {
                    this.$message.error({
                        type: "warning",
                        message: res.data.msg,
                    });
                }
            });
        },
        getList() {
            alluserListApi().then((res) => {
                console.log(res);
                if (res.data.code == 1) {
                    this.tableData = res.data.data;
                }
                if (res.data.code == 401) {
                    this.$message({
                        type: "error",
                        message: res.data.msg,
                        duration: 1000,
                        onClose: () => {
                            router.replace("/login");
                        },
                    });
                }
            });
        },
        deleteArticle(id) {
            //这里加一层modle判断确认是否删除
            this.$confirm("确认要删除这个用户吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            })
                .then(() => {
                    UserinfoDeleteApi({ id: id }).then((res) => {
                        console.log(res);
                        if (res.data.code == 1) {
                            this.$message({
                                type: "success",
                                message: res.data.msg,
                                duration: 1500,
                                onClose: () => {
                                    this.getList();
                                },
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.msg,
                            });
                        }
                    });
                })
                .catch((err) => {
                    console.log("用户点击了取消");
                });
        },
        editArticle(id) {
            this.title = "修改用户信息";
            this.dialogFormVisible = true;
            this.disabled = false;
            userDetailEvery(id).then((res) => {
                if (res.data.code == 1) {
                    this.form = res.data.data;
                } else {
                    this.$message({
                        type: "error",
                        message: "获取数据失败",
                    });
                }
            });
        },
        onSubmit() {
            this.$refs.articleForm.validate((valid) => {
                if (valid) {
                    if (this.form.id) {
                        UserinfoEditApi(this.form).then((res) => {
                            console.log(res, "修改");
                            if (res.data.code == 1) {
                                this.$message({
                                    type: "success",
                                    message: res.data.msg,
                                    duration: 1500,
                                    onClose: () => {
                                        this.getList();
                                        this.dialogFormVisible = false;
                                    },
                                });
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.data.msg,
                                });
                            }
                        });
                    } else {
                        ArticleAddApi(this.form).then(res => {
                            if (res.data.code == 1) {
                                this.$message({
                                    type: "success",
                                    message: res.data.msg,
                                    duration: 1500,
                                    onClose: () => {
                                        this.getList();
                                        this.dialogFormVisible = false;
                                    },
                                });
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.data.msg,
                                });
                            }
                        })
                    }
                } else {
                    this.$message({
                        type: "warning",
                        message: "请填写完整信息",
                    });
                }
            });
        },
    },
};
</script>
  
<style lang="scss" scoped>
.bigbox {
    display: flex;
    background-color: white;
    padding-top: 20px;
    margin-bottom: 20px;
}

.el-pagination {
    margin-top: 20px;
}

.tableData_image {
    width: 180px;
    height: 100px;
}

.image {
    width: 200px;
    height: 200px
}
</style>
  